<template>
  <div id="app" class="container">
    <div class="row">
      <div class="col-xs-12">
        <h1 style="text-align: center;">tree component</h1>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-6">
        <pre><code>{{formatJSON(data)}}</code></pre>
      </div>
      <div class="col-xs-6">
        <tree-select 
          :data="data" 
          :checked="checked"
          @trigger-check="handleCheck"
          >
        </tree-select>
      </div>
    </div>
  </div>
</template>

<script>
import TreeView from './tree-view/index.vue'
import TreeSelect from './tree-select/index.vue'
var data = [{
  name: '国家/地区',
  children: [{
    name: '非洲',
    children:[{
      name: '利比亚',
    },{
      name: '某国'
    }]
  },{
    name: '亚洲',
    children:[{
      name: '中国',
    },{
      name: '日本'
    }]    
  }]
},{
  name: '地区',
  children: [{
    name: '自由贸易区'
  },{
    name: '欧元区'
  }]
}]

export default {
  name: 'app',
  data () {
    return {
      data: data,
      checked: ['地区','自由贸易区']
    }
  },
  methods: {
    formatJSON (data) {
      return JSON.stringify(data, true, 2)
    },
    handleCheck( data) {
      console.log('--app--')
      this.checked = this.checked.concat(data)
    }
  },
  components : {
    TreeSelect
  }
}
</script>

<style>
  #app {
    width: 800px;
    margin: 10px auto;
  }
</style>
